<template>
	<div class="home">
        <header>
            <el-row class="header2">
                <el-col :span="6" class="logo2">后台管理系统</el-col>
                <el-col :span="15">
                    <div class="greet">
                      华软作业管理系统
                    </div>
                </el-col>
                <el-col :span="3" class="nav">
                    <el-menu theme="dark" default-active="1" class="menu" mode="horizontal" @select="menuSelect">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-submenu index="2" >
                        <template slot="title">管理</template>
                        <el-menu-item index="3">用户</el-menu-item>
                        <el-menu-item index="4">退出</el-menu-item>
                    </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </header>

        <!--header end-->

		<el-row class="main">
			<el-col :span="2" class="navbar-wrap">
				<div class="navbar">
					<el-menu default-active="0" class="navbar-ul" @open="" @click.native="" @close="">
					<router-link to="/home">
						<el-menu-item index="0"><i class="el-icon-menu"></i>主面板</el-menu-item>
					</router-link>
					<router-link to="/home/user">
						<el-menu-item index="4"><i class="el-icon-setting"></i>用户</el-menu-item>
					</router-link>
					</el-menu>
				</div>
			</el-col>
			<el-col :span="22" class="content">
				<router-view></router-view>
			</el-col>
		</el-row>
	</div>
</template>
<script>
/*import top from '../components/top.vue'
import dashboard from '../components/dashboard.vue'*/
export default {
	/*components:{
		top,dashboard
	},*/
	data () {
	    return {
	      user: '管理员'
	    }
  	},
  	mounted(){
  		this.setUser()
  	},
    methods: {
    setUser(){
        this.user = JSON.parse(sessionStorage.getItem("user"));
    },
    menuSelect(key, keyPath){
            if(key == 1){
            this.$router.push('/home');
        }
        if(key == 3){
            this.$router.push('/home/user');
        }
        if(key == 4){
            this.$confirm('是否要退出?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.commit('logout',false);
                this.$message({
                type: 'success',
                message: '已退出!'
                });
                window.location.reload();
            }).catch(() => {
                    
            });
			this.$router.push('/Admin_login');
        }
    }
  }
}	
</script>
<style>
/*@import '../styles/public.less';*/
.home{
	width: 100%;
	height: 100%;
	.main{
		width: 100%;
		height: 100%;
		.navbar-wrap{
			height: 100%;
			.navbar{
				height: 100%;
				.navbar-ul{
					height: 100%;
				}
			}
		}
		.content{
			height: 100%;
		}
	}
}
.header2{
	height: 60px;
	background-color:#666;
    
	.logo2{
		color: @white;
		height: 60px;
		line-height: 60px;
	}
	.greet{
		color: @white;
		height: 60px;
		line-height: 60px; 
	}
	.nav{
		.menu{
			border-radius: 0px;
		}
	}
}
</style>